<template>
  <div>
    <div class="panel panel-default" style="padding-top: 10px;">
      <div class="panel-heading"><b>步骤一. 编辑配置集</b></div>
      <div class="panel-body">
        <div class="container-fluid">
          <div class="row" style="padding : 10px 0px">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon " style="background-color: #EFF2F7">英文名称</span>
                <input type="hidden">
                <input type="text" class="form-control" v-model="struct.code" :disabled="true">
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon " style="background-color: #EFF2F7">中文名称</span>
                <input type="text" class="form-control" v-model="struct.description">
              </div>
            </div>
          </div>
          <div class="row" style="padding : 10px 0px">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon " style="background-color: #EFF2F7">键类型&nbsp;&nbsp;&nbsp;</span>
                <select class="form-control" v-model="struct.keyType" :disabled="true">
                  <option value="1">单键（独立键，键只对应一个字段）</option>
                  <option value="2">组合键（联合键，键可包含多个字段）</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon " style="background-color: #EFF2F7">值类型&nbsp;&nbsp;&nbsp;</span>
                <select class="form-control" v-model="struct.valueType" :disabled="true">
                  <option value="2">复杂对象（值可包含多个字段，JSON存储各字段）</option>
                  <option value="1">基础类型（值只对应一个字段，数值/字符串/布尔）</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row" style="padding : 10px 0px">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon " style="background-color: #EFF2F7">键值关系</span>
                <select class="form-control" v-model="struct.kvMapType" :disabled="true">
                  <option value="1">一对一（键唯一性，只对应一条记录）</option>
                  <option value="2">一对多（键可重复，可存在多条记录）</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon " style="background-color: #EFF2F7">推送方式</span>
                <select class="form-control" v-model="struct.pushType">
                  <option value="0">自动推送（配置变更自动推送）</option>
                  <!--<option value="1">手工推送（人工控制推送时机）</option>-->
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-button type="primary" style="margin-left: 1150px;margin-bottom: 10px" @click="saveCfgmap">
        保存
      </el-button>
    </div>
    <div class="panel panel-default" style="width: 100%">
      <div class="panel-heading" style="width: 100%"><b>步骤二. 编辑字段列表</b></div>
      <div class="panel-body">
        <div style="padding-top: 10px;text-align: center">
          <el-alert
            title="设置为键的字段，系统会自动对其做去重处理 (建议每个配置集至少存在一个键)"
            close-text="朕知道了"
            type="info"
            show-icon>
          </el-alert>
        </div>
        <div class="table-responsive" style="width: 100%;margin-top: 10px;">
          <table class="table table-bordered table-hover table-striped table-condensed" id="fields_table">
            <tbody>
            <tr style="background-color: #E5E9F2;">
              <th style="text-align: center;">编号</th>
              <th style="text-align: center;">字段名称</th>
              <th style="text-align: center;">字段描述</th>
              <th style="text-align: center;">字段类型</th>
              <th style="text-align: center;">数据类型</th>
              <th style="width: 200px;text-align: center">
                操作
                <el-button type="primary" size="mini" @click="showAddFieldDialog" style="margin-left: 40px;">
                  新增字段
                </el-button>
              </th>
            </tr>
            <tr v-for="f in fields">
              <td style="text-align: center;vertical-align:middle" class="info">{{f.id}}</td>
              <td style="text-align: center;vertical-align:middle">{{f.name}}</td>
              <td style="text-align: center;vertical-align:middle">{{f.description}}</td>
              <td style="text-align: center;vertical-align:middle">{{f.type | fieldTypeFilter}}</td>
              <td style="text-align: center;vertical-align:middle">{{f.dataType | dataTypeFilter}}</td>
              <td style="text-align: center;vertical-align:middle">
                <div>
                  <el-button type="info" size="small" @click="showEditFieldDialog(f)">编辑</el-button>
                  <el-button type="danger" size="small" @click="delField(f)">删除</el-button>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <el-dialog title="新增配置集字段" :visible.sync="dialogFormVisible" size="large" top="20%">
      <el-form :model="form">
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">英文名称:</span>
              <el-input placeholder="配置字段标识，程序访问使用，建议驼峰格式" v-model="fieldData.name"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">中文名称:</span>
              <el-input placeholder="当数据类型为关联配置时，此处填写关联配置节点的ID" v-model="fieldData.decription"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">字段提示:</span>
              <el-input placeholder="该信息在用户配置该字段时, 会提示给用户" v-model="fieldData.tip"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">字段类型:</span>
              <el-select v-model="fieldData.fieldType" clearable placeholder="请选择">
                <el-option
                  v-for="item in fieldType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">是否可空:</span>
              <el-select v-model="fieldData.isNull" clearable placeholder="请选择">
                <el-option
                  v-for="item in isNull"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">数据类型:</span>
              <el-select v-model="fieldData.dataType" clearable placeholder="请选择">
                <el-option
                  v-for="item in dataType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">默认取值</span>
              <el-input
                type="textarea"
                autosize
                placeholder="当新增/修改操作没有指定字段值时，系统写入默认取值"
                :autosize="{ minRows: 3, maxRows: 6}"
                v-model="fieldData.defaulfValue">
              </el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">取值格式</span>
              <el-input
                type="textarea"
                autosize
                placeholder="输入正则表达式校验字段数据合法性"
                :autosize="{ minRows: 3, maxRows: 6}"
                v-model="fieldData.valueFormat">
              </el-input>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveField">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑配置集字段" :visible.sync="dialogEditFormVisible" size="large" top="20%">
      <el-form :model="form">
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">英文名称:</span>
              <el-input placeholder="配置字段标识，程序访问使用，建议驼峰格式" v-model="editFieldData.name" :disabled="true"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">中文名称:</span>
              <el-input placeholder="当数据类型为关联配置时，此处填写关联配置节点的ID" v-model="editFieldData.decription"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">字段提示:</span>
              <el-input placeholder="该信息在用户配置该字段时, 会提示给用户" v-model="editFieldData.tip"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">字段类型:</span>
              <el-select v-model="editFieldData.fieldType" clearable placeholder="请选择" :disabled="true">
                <el-option
                  v-for="item in fieldType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">是否可空:</span>
              <el-select v-model="editFieldData.isNull" clearable placeholder="请选择" :disabled="true">
                <el-option
                  v-for="item in isNull"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">数据类型:</span>
              <el-select v-model="editFieldData.dataType" clearable placeholder="请选择" :disabled="true">
                <el-option
                  v-for="item in dataType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">默认取值</span>
              <el-input
                type="textarea"
                autosize
                placeholder="当新增/修改操作没有指定字段值时，系统写入默认取值"
                :autosize="{ minRows: 3, maxRows: 6}"
                v-model="editFieldData.defaulfValue">
              </el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-group">
              <span class="input-group-addon" style="background-color: #EFF2F7">取值格式</span>
              <el-input
                type="textarea"
                autosize
                placeholder="输入正则表达式校验字段数据合法性"
                :autosize="{ minRows: 3, maxRows: 6}"
                v-model="editFieldData.valueFormat">
              </el-input>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editField">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
  .el-row {
    margin-bottom: 20px;
  }
</style>

<script>
  import {mapState, mapMutations} from 'vuex';
  import fetch from "../../store/uacc_api";
  export default {
    data: function () {
      return {
        showTab: true,
        dialogFormVisible: false,
        dialogEditFormVisible: false,
        formLabelWidth: '90px',
        //推送方式默认手动
        pushType: 1,
        textarea2: '',
        fields: [],
        structData: {
          pushType: 0,
          structEname: '',
          structCname: '',
          valueType: 2,
          keyType: 1,
          kvType: 1
        },
        fieldData: {
          name: '',
          fieldType: 2,
          dataType: 1,
          isNull: 1,
          decription: '',
          defaulfValue: '',
          valueFormat: ''
        },
        editFieldData: {
          id: '',
          name: '',
          fieldType: 2,
          dataType: 1,
          isNull: 1,
          decription: '',
          defaulfValue: '',
          valueFormat: ''
        },
        form: {
          cname: '',
          ename: '',
          authman: '',
          cfgmap: ''
        },
        dataType: [{
          label: '字符串',
          value: 1
        }, {
          label: '数值',
          value: 2
        }, {
          label: '布尔',
          value: 3
        }, {
          label: '关联配置',
          value: 4
        }],
        isNull: [{
          label: '非空',
          value: 0
        }, {
          label: '可空',
          value: 1
        }],
        fieldType: [{
          label: '键',
          value: 1
        }, {
          label: '值',
          value: 2
        }]
      }
    },
    filters: {
      dataTypeFilter: function (value) {
        let res = '';
        switch (value) {
          case 1:
            res = '字符串';
            break;
          case 2:
            res = '数值';
            break;
          case 3:
            res = '布尔';
            break;
          case 4:
            res = '关联配置';
            break;
          default:
            res = '字符串';
        }
        return res;
      },
      fieldTypeFilter: function (value) {
        let res = '';
        switch (value) {
          case 1:
            res = '键';
            break;
          case 2:
            res = '值';
            break;
          default:
            res = '值';
        }
        return res;
      }
    },
    computed: {
      ...mapState(['currentNode']),
      struct: function () {
        let obj;
        obj = JSON.parse(JSON.stringify(this.$route.params));
        return obj;
      }
    },
    created: function () {
      this.queryFieldsOfStruct();
    },
    methods: {
      ...mapMutations(['editCfgMaps','editCurrentStructs']),
      showAddFieldDialog(){
        this.dialogFormVisible = true;
        this.fieldData.name = '',
        this.fieldData.fieldType = 2,
        this.fieldData.dataType = 1,
        this.fieldData.isNull = 1,
        this.fieldData.decription = '',
        this.fieldData.defaulfValue = '',
        this.fieldData.valueFormat = '',
        this.fieldData.tip = ''
      },
      //更新配置集
      saveCfgmap(){
        let me = this;
        let struct = {
          id: this.struct.id,
          description: this.struct.description,
          code: this.struct.code,
          kvMapType: this.struct.kvMapType,
          keyType: this.struct.keyType,
          valueType: this.struct.valueType
        };
        let param = {'data': encodeURIComponent(JSON.stringify(struct))};
        fetch.updateConfigStruct(param).then(function (res) {
          if (res.success) {
            me.initCfgMaps();
            me.$message({
              showClose: true,
              type: 'success',
              message: '更新配置集成功'
            });
          } else {
            me.$message({
              showClose: true,
              message: res.errorMessage,
              type: 'error'
            });
          }
        })
      },
      initCfgMaps(){
        let me = this;
        fetch.queryAllStructs().then(function (res) {
          if (res.success) {
            me.editCfgMaps(res.data);
          }
        })
      },
      //新增配置集字段
      saveField(){
        if (this.fieldData) {
          let me = this;
          let field = {
            name: this.fieldData.name,
            description: this.fieldData.decription,
            type: this.fieldData.fieldType,
            dataType: this.fieldData.dataType,
            defaultValue: this.fieldData.defaulfValue,
            nullable: this.fieldData.isNull,
            valuePattern: this.fieldData.valueFormat,
            tip:this.fieldData.tip,
            configStructId: this.struct.id
          };
          let param = {'data': encodeURIComponent(JSON.stringify(field))};
          fetch.addConfigField(param).then(function (res) {
            if (res.success) {
              me.dialogFormVisible = false;
              me.$message({
                showClose: true,
                type: 'success',
                message: '添加配置集字段成功'
              });
              //刷新配置集数据
              me.changeStruct();
              //刷新配置字段
              me.queryFieldsOfStruct();
            } else {
              me.dialogFormVisible = false;
              me.$message({
                showClose: true,
                message: res.errorMessage,
                type: 'error'
              });
            }
          })
        }
      },
      delField(val){
        let me = this;
        let param = {fieldId: val.id};
        fetch.deleteConfigField(param).then(function (res) {
          if (res.success) {
            me.queryFieldsOfStruct();
            //刷新配置集数据
            me.changeStruct();
            me.$message({
              showClose: true,
              type: 'success',
              message: '删除配置集字段成功'
            });
          } else {
            me.dialogFormVisible = false;
            me.$message({
              showClose: true,
              message: res.errorMessage,
              type: 'error'
            });
          }
        })
      },
      queryFieldsOfStruct(){
        let me = this;
        let param = {structId: this.struct.id};
        fetch.queryFieldsOfStruct(param).then(function (res) {
          if (res.success) {
            me.fields = res.data ? res.data : [];
          } else {
            me.$message({
              showClose: true,
              message: res.errorMessage,
              type: 'error'
            });
          }
        })
      },
      showEditFieldDialog(f){
        this.editFieldData.id = f.id;
        this.editFieldData.name = f.name,
          this.editFieldData.fieldType = f.type,
          this.editFieldData.dataType = f.dataType,
          this.editFieldData.isNull = f.nullable ? 1 : 0,
          this.editFieldData.decription = f.description,
          this.editFieldData.defaulfValue = f.defaultValue,
          this.editFieldData.tip = f.tip,
          this.editFieldData.valueFormat = f.valuePattern,
          this.dialogEditFormVisible = true;
      },
      editField(){
        this.dialogEditFormVisible = false;
        let me = this;
        let field = {
          id: this.editFieldData.id,
          name: this.editFieldData.name,
          description: this.editFieldData.decription,
          type: this.editFieldData.fieldType,
          dataType: this.editFieldData.dataType,
          defaultValue: this.editFieldData.defaulfValue,
          nullable: this.editFieldData.isNull,
          valuePattern: this.editFieldData.valueFormat,
          tip:this.editFieldData.tip,
          configStructId: this.struct.id
        };
        let param = {'data': encodeURIComponent(JSON.stringify(field))};
        fetch.updateConfigField(param).then(function (res) {
          if (res.success) {
            me.$message({
              showClose: true,
              message: '保存成功',
              type: 'success'
            });
            me.queryFieldsOfStruct();
          } else {
            me.$message({
              showClose: true,
              message: res.errorMessage,
              type: 'error'
            });
          }
        })
      },
      changeStruct(){
        let me = this;
        fetch.queryConfigView({nodePath: me.currentNode.nodePath}).then(function (res) {
          me.editCurrentStructs(res.data);
        })
      },
    }
  }
</script>
